<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    },
    autoResize: {
      type: Boolean,
      default: true
    },
    chartData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    // 使用计算属性处理 legend 的 data
    legendData() {
      return this.chartData.legendData || [];
    },
    xAxisData() {
      return this.chartData.xAxisData || [];
    },
    yAxisAll(){
      return this.chartData.yAxisAll || [];
    },
    lineSeriesData() {
      return this.chartData.lineSeriesData || [];
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(newData) {
        this.$nextTick(() => {
          this.initChart();
        });
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      try {
        this.chart = echarts.init(this.$el,'macarons');
        const chartOptions = this.generateChartOptions();
        this.chart.setOption(chartOptions);
      } catch (error) {
        console.error('初始化图表时出错:', error);
      }
    },
    generateChartOptions() {
        return {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            // data:[ '总营收（元）', '总成本（元）', '总利润（元）'] 
            data:this.legendData
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ["2024 年 4 月","2024 年 5 月","2024 年 6 月","2024 年 7 月","2024 年 8 月","2024 年 9 月","2024 年 10 月","2024 年 11 月","2024 年 12 月","2025 年 1 月","2025 年 2 月","2025 年 3 月"],
            data: this.xAxisData,
            axisPointer: {
              type: 'shadow'
            }
          },
          yAxis: {
            type: 'value'
          },
          series:this.lineSeriesData,
          // series: [
          //   {
          //     name: '总营收（元）',
          //     type: 'line',
          //     stack: 'Total',
          //     data: [115000,119100,125000,139100,145000,130900,125000,115000,135000,130900,119100,139100]
          //   },
          //   {
          //     name: '总成本（元）',
          //     type: 'line',
          //     stack: 'Total',
          //     data: [38000,40000,39500,42500,43000,41000,40500,38500,42000,41500,39000,43500]
          //   },
          //   {
          //     name: '总利润（元）',
          //     type: 'line',
          //     stack: 'Total',
          //     data: [77000,79100,85500,96600,102000,89900,84500,76500,93000,89400,80100,95600]
          //   },
          // ]
        }
      }
    }
    //   this.setOptions(this.chartData)
    // },
    // setOptions({ expectedData, actualData } = {}) {
    //   this.chart.setOption({
    //     xAxis: {
    //       data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    //       boundaryGap: false,
    //       axisTick: {
    //         show: false
    //       }
    //     },
    //     grid: {
    //       left: 10,
    //       right: 10,
    //       bottom: 20,
    //       top: 30,
    //       containLabel: true
    //     },
    //     tooltip: {
    //       trigger: 'axis',
    //       axisPointer: {
    //         type: 'cross'
    //       },
    //       padding: [5, 10]
    //     },
    //     yAxis: {
    //       axisTick: {
    //         show: false
    //       }
    //     },
    //     legend: {
    //       data: ['expected', 'actual']
    //     },
    //     series: [{
    //       name: 'expected', itemStyle: {
    //         normal: {
    //           color: '#FF005A',
    //           lineStyle: {
    //             color: '#FF005A',
    //             width: 2
    //           }
    //         }
    //       },
    //       smooth: true,
    //       type: 'line',
    //       data: expectedData,
    //       animationDuration: 2800,
    //       animationEasing: 'cubicInOut'
    //     },
    //     {
    //       name: 'actual',
    //       smooth: true,
    //       type: 'line',
    //       itemStyle: {
    //         normal: {
    //           color: '#3888fa',
    //           lineStyle: {
    //             color: '#3888fa',
    //             width: 2
    //           },
    //           areaStyle: {
    //             color: '#f3f8ff'
    //           }
    //         }
    //       },
    //       data: actualData,
    //       animationDuration: 2800,
    //       animationEasing: 'quadraticOut'
    //     }]
    //   })
    // }
  // }
}
</script>
